\n\nRxJs 정리 질문용 공부 후 정리 자료입니다.
\n
여기서 Reactive Extensions 는 ReactiveX 프로젝트에서 출발한 리액티브 프로그래밍을 지원하기위해 확장했다는 뜻이다.
\nReactiveX 는 Observer 패턴, Iterator 패턴, 함수형 프로그래밍을 조합하여 제공한다.
\nRxJS는 이벤트 스트림을 Observable 이라는 객체로 표현한 후 비동기 이벤트 기반의 프로그램 작성을 돕는다.
\n이벤트 처리를 위한 API로 다양한 연산자를 제공하는 함수형 프로그래밍 기법도 도입되어 있다.
\n외부와 통신하는 방식은 Pull 과 Push 시나리오가 있을 수 있다.
\n일반적인 비동기 이벤트인 클릭 이벤트를 구현 보자.
\n// javascript\nfunction event() {\n // ...\n};\nconst el = document.getElementsById('Button');\nel.addEventListener('click', event)targetElement를 가져와서 addEventListener 로 ‘click’ 이벤트를 구독하였다.\n사용자가 마우스 클릭을 하기 전까지는 event function이 발생되지 않는다.\n여기서 우리는 Reactive Programming 의 개념중 하나인 Observer Pattern 을 발견할 수 있다.
\naddEventListener 로 targetElement가 click 이벤트를 구독하도록 옵저버를 등록한후,\nclick 이벤트가 발생하면 event function을 호출하여 옵저버에게 알린다.
\n\n\nObserver pattern은 객체의 상태 변화를 관찰하는 옵저버들의 목록을 객체에 등록하여 상태 변화가 있을 때마다 메서드 등을 통해 객체가 직접 목록의 각 옵저버에게 통지하도록 하는 디자인 패턴이다.
\n
비동기 코드가 많아지면 그만큼 제어의 흐름이 복잡하게 얽혀 코드를 예측하기 어려워진다.\nRxJS 는 Javascript 의 비동기 프로그래밍의 문제를 해결하는데 도움을 준다.\nRxJS는 Observer 패턴을 적용한 Observable 이라는 객체를 중심으로 동작한다.
\n// javascript\nObservable.create(\n (observer) => {\n try {\n observer.next('item');\n } catch(e) {\n observer.error(e);\n } finally {\n observer.complete();\n }\n}).subscribe(\n (x) => console.log(x),\n (err) => console.error(err),\n () => console.log('complete')\n)RxJS에서는 Subject를 지원한다.\nSubject는 여러 Observer 에서 구독이 가능하며, Subject에서 전달하는 값을 Observer 들이 전달 받는다.
\n// javascript\nconst subject = new Subject();\nsubject.subscribe(\n (item) => console.log('a', item),\n (err) => console.error(err),\n () => console.log('a complete'),\n);\nsubject.subscribe(\n (item) => console.log('b', item),\n (err) => console.error(err),\n () => console.log('b complete'),\n);\nsubject.next('item');\nsubject.complete();\n// a item\n// b item\n// a complete\n// b completeRxJS에서는 Scheduler를 지원한다.
\n자바스크립트는 싱글스레드, 이벤트 루프로 동작하기 때문에, RxJS 에서의 Scheduler 는 이벤트 루프에 어떤 순서로 처리될지로 구현되었다.
\n스케줄러에는 3가지 종류가 존재한다.
\nqueueScheduler.schedule(function (x) {\n if(state) { this.schedule(state-1) }\n console.log(state);\n}, 0, 3)\n// 3\n// 2\n// 1\n// 01부터 10 까지 중에서 짝수를 구하여 1 을 더하는 예제 이다.
\nrange(1, 10).pipe(\n tap(\n (x) => console.log('tap:' + x),\n (err) => console.error(err),\n () => console.log('tap complete')\n ),\n filter(x => !(x % 2)),\n map(x => x + 1),\n).subscribe(\n (x) => console.log('subscribe:' + x),\n (err) => console.err(err),\n () => console.log('complete')\n);\n// tap:1\n// tap:2\n// subscribe:3\n// tap:3\n// tap:4\n// subscribe:5\n// tap:5\n// tap:6\n// subscribe:7\n// tap:7\n// tap:8\n// subscribe:9\n// tap:9\n// tap:10\n// subscribe:11\n// tap complete\n// complete